<template>
  <scroll-view
    enable-back-to-top
    scroll-y
    :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
    @scrolltolower="getFollowTaskList"
  >
    <view>
      <u-navbar
        :placeholder="true"
        :titleStyle="{ color: '#ffffff' }"
        leftIconColor="#ffffff"
        bgColor="#3775cb"
        :autoBack="true"
      >
      </u-navbar>


      <view style="margin-top: 20rpx" v-for="(item, index) in followTaskList" :key="index">
        <uni-card>
          <template v-slot:title>
            <view class="icons-text card-title">
              <text class="icons">
                <u-icon name="hourglass" color="#1296db" size="18"></u-icon>
              </text>
              <text class="text">跟进任务</text>
            </view>
          </template>
          <view class="card-body" @tap="onPopupShow(item)">
            <text>{{ item?.abstractText }}</text>
            <view class="icons-text">
              <text class="icons">
                <image mode="aspectFill" class="image" src="@/static/icons/todo.png"></image>
              </text>
              <text class="text">{{ item?.followTime }}</text>
            </view>
            <view class="icons-text" v-for="(cus, i) in item?.followTaskTargetVoList" :key="i">
              <text class="icons">
                <image
                  mode="aspectFill"
                  class="image"
                  :src="
                    cus?.targetObject?.avatarUrl
                      ? cus?.targetObject?.avatarUrl
                      : '/static/icons/avatar.png'
                  "
                ></image>
              </text>
              <text class="text">{{ cus?.targetObject?.name }}</text>
            </view>
          </view>
          <view style="text-align: right; color: red" @click="handleRemove(item)"> 删除</view>
        </uni-card>
      </view>
      <u-empty v-show="isFinish && followTaskList.length === 0" mode="history"/>
      <u-loadmore v-if="isLoading" status="loading"/>
      <u-loadmore v-if="isFinish && followTaskList.length > 0" status="nomore"/>
      <view
        @click="openAdd"
        style="
          position: fixed;
          width: 80rpx;
          height: 80rpx;
          background-color: rgba(55, 117, 203, 0.47);
          bottom: 350rpx;
          right: 0;
          border-radius: 50rpx 0 0 50rpx;
          padding: 12rpx 15rpx;
        "
      >
        <u-icon name="plus-circle" color="#3775cb" size="30"></u-icon>
      </view>
      <u-popup :show="popupShow" :round="10" @close="popupShow = false">
        <view style="max-height: 60vh; overflow: auto; margin-top: 20rpx">
          <view class="list">
            <uni-list>
              <uni-list :border="true">
                <uni-list-chat
                  v-for="(cus, index) in followTaskTargetVoList"
                  :key="index"
                  :title="
                  cus?.targetType === '1' ? cus?.targetObject?.name : cus?.targetObject?.nickName
                "
                  :avatar="
                  cus?.targetObject?.avatarUrl
                    ? cus?.targetObject?.avatarUrl
                    : '/static/icons/avatar.png'
                "
                  badge-positon="left"
                >
                  <view class="chat-custom-right">
                    <view @click="clickUserProfile(cus)" style="margin-top: 14rpx">
                      <image
                        style="width: 50rpx"
                        class="slot-image"
                        :src="
                        cus?.targetObject?.type === '1'
                          ? '/static/icons/WeChat.png'
                          : '/static/icons/wecom.png'
                      "
                        mode="widthFix"
                      ></image>
                    </view>
                  </view>
                </uni-list-chat>
              </uni-list>
            </uni-list>
          </view>
        </view>
      </u-popup>
    </view>
  </scroll-view>

</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import * as ww from '@wecom/jssdk'
import {OpenUserProfileType} from '@wecom/jssdk'
import {createJsapiSignatureAPI} from '@/services/common'
import {deleteFollowTaskAPI, getFollowTaskListAPI} from '@/services/followTask'
import {registerApi} from "@/utils/wecom";
import {onShow} from "@dcloudio/uni-app";

const props = defineProps<{
  customerId: string
}>()
// 请求参数
const queryParams= ref<any> (
  {
    customerId: props.customerId,
    pageNum: 1,
    pageSize: 10,
  }
)
const popupShow = ref<boolean>(false)
const followTaskTargetVoList = ref<any[]>([])
const isFinish = ref(false)
// 是否触发下拉刷新
const isTriggered = ref(false)
// 获取订单列表
const followTaskList = ref<any[]>([])
// 是否加载中标记，用于防止滚动触底触发多次请求
const isLoading = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 重置数据
  queryParams.value.page = 1
  followTaskList.value = []
  isFinish.value = false
  // 加载数据
  await getFollowTaskList()
  // 关闭动画
  isTriggered.value = false
}
const getFollowTaskList = async () => {
  // 如果数据出于加载中，退出函数
  if (isLoading.value) return
  // 退出分页判断
  if (isFinish.value === true) {
    return
  }
  // 发送请求前，标记为加载中
  isLoading.value = true
  // 发送请求
  const res = await getFollowTaskListAPI(queryParams.value)
  // 发送请求后，重置标记
  isLoading.value = false
  // 数组追加
  followTaskList.value.push(...res.rows)
  // 分页条件
  if (followTaskList.value.length < res.total) {
    // 页码累加
    queryParams.value.pageNum++
  } else {
    // 分页已结束
    isFinish.value = true
  }
}
const openAdd = async () => {
  uni.navigateTo({
    url: '/pagesTodo/followTask/followTaskForm',
  })
}

const handleRemove = async (row: any) => {
  uni.showModal({
    content: '是否删除',
    confirmColor: '#e51010',
    success: async (res) => {
      if (res.confirm) {
        await deleteFollowTaskAPI(row.followTaskId)
        followTaskList.value = followTaskList.value.filter(
          (item) => item?.followTaskId !== row.followTaskId,
        )
      }
    },
  })
}

const clickUserProfile = (row: any) => {
  if (row?.targetType === '1') {
    ww.openUserProfile({
      type: OpenUserProfileType.external,
      userid: row?.targetObject?.qwExternalUserid,
    })
  }
}

const onPopupShow = (row: any) => {
  console.log('followTaskList.value', followTaskList.value)
  console.log("row['followTaskId']", row['followTaskId'])
  for (const key in followTaskList.value) {
    if (followTaskList.value[key]['followTaskId'] === row['followTaskId']) {
      followTaskTargetVoList.value = followTaskList.value[key]['followTaskTargetVoList']
      console.log('followTaskTargetVoList.value', followTaskTargetVoList.value)
    }
  }
  popupShow.value = true
}

// 组件挂载完毕
onMounted(async () => {
  getFollowTaskList()
})

onShow(async () => {
  registerApi(['openUserProfile'])
})

</script>

<style lang="scss" scoped>
page {
  background-color: #f7f7f7;
  height: 100%;
}
.icons-text {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-top: 10rpx;
  color: #666;

  .icons {
    color: #3775cb;
    padding: 6rpx 5rpx 7rpx 0;
    .image {
      width: 26rpx;
      height: 26rpx;
    }
  }
}
.card-title {
  font-size: 28rpx;
}
.card-body {
  padding-left: 18rpx;
}
</style>
